<template>
  <maincontainer>
    <mycard>
      <n-form  ref="formRef" :label-width="80"  label-placement="left" :model="formValue">
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-button @click="handleSearch">查询</n-button>
            <n-button @click="handleResetForm">重置</n-button>
            <n-button @click="handleCreate">新建</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <div class="flex justify-center flex-1">
      <mycard class="w-200px h-full" :loading='treeloading'>
        <div class='w-full flex justify-end'>
          <n-button size='tiny' @click='gettreeDatefunc'>刷新</n-button>
        </div>
          <n-tree
            ref="treeref"
            block-line
            :data="treeData"
            selectable
            key-field='id'
            label-field='name'
          />
      </mycard>
      <mycard class="flex-1 h-full" :loading='loading'>
        <flextable :column="column" :tabledata="tableData" ></flextable>
      </mycard>
    </div>
    <mycard class="w-full h-8">
      <fenye :total="total" @change="gettabledatafunc" ref='fenyeref' class="juzhong1"></fenye>
    </mycard>
    <Edit ref="editref" @close='refreshdelete'></Edit>
  </maincontainer>
</template>

<script setup name="Menumanager" lang="ts">
import {useRoute} from "vue-router";
import { DefineComponent, inject, ref } from 'vue'
import Edit from "./modal.vue"
import { useListIndex } from '../../../hooks/useEdit'
import { useColumns } from '../../../hooks/useColumns'
const route = useRoute()
const treeref = ref<HTMLElement | null | DefineComponent>(null)

const treeloading = ref(false)

const {formRef, fenyeref, editref, formValue, tableData, total, handleSearch,
  handleResetForm, handleView,handleCreate,refreshdelete,http,message,loading} = useListIndex()

const delDialog:undefined | Function = inject("delDialog")
const handleDelete = (data:any)=>{
  delDialog && delDialog(refreshdelete,http.menudelete,data.id,data.name)
}

const handleEdit=(data:any)=>{
  http.menuget({},data.id,loading).then((res:any)=>{
    if(res.data.code===0){
      const result = res.data.data
      result.sort = result.sort.toString()
      editref.value.init("edit",result)
    }else{
      message.error(res.data.error.toString() || res.data.msg)
    }
  })
}

const {index, createdTime, changeTime,desc, view, edit, del} = useColumns(handleView,handleEdit,handleDelete)
const column= ref([
  index,
  {title: "菜单名称", key: "name", show: true},
  {title: "排序", key: "sort", show: true},
  {title: "分类", key: "fenlei", show: true,render: (rowDate:any,)=>{
    return rowDate.fenlei==1?"内部路由":rowDate.fenlei==2?"外链":rowDate.fenlei==3?"目录":""
    }},
  {title: "上级菜单", key: "parent", show: true,render: (rowDate:any,)=>{
    return rowDate.parent ? rowDate.parent.name : ""
    }},
  {title: "是否缓存", key: "cache", show: true,render: (rowDate:any,)=>{
      return rowDate.cache==1?"是":"否"
    }},
  {title: "启用", key: "status", show: true,render: (rowDate:any)=>{
      return rowDate.status==1?"是":"否"
    }},
  {title: "侧边显示", key: "show", show: true,render: (rowDate:any,)=>{
      return rowDate.show==1?"是":"否"
    }},
  {title: "打开新页面", key: "blank", show: true,render: (rowDate:any,)=>{
    return rowDate.blank==1?"否":"是"
    }},
  createdTime,
  changeTime,
  desc,
  view,
  edit,
  del,
])     // 表格字段

// 树形数据
const treeData=ref([])


// 向后台获取表格数据
const gettabledatafunc=()=>{
  const config = {
    page:fenyeref.value.page,
    pageSize:fenyeref.value.pageSize,
    ...formValue.value,
  }
  http.menulist(config,loading).then((res:any)=>{
    if(res.data.code===0){
      tableData.value = res.data.items
      total.value = res.data.total
    }
  }).catch((err:any)=>{
    message.error(err || "获取数据失败")
  })
}
// 向后台获取树形数据
const gettreeDatefunc=()=>{
  http.menutree({},treeloading).then((res:any)=>{
    if(res.data.code===0){
      treeData.value = res.data.items
    }else{
      message.error(res.data.msg || "获取全部菜单失败")
    }
  }).catch(err=>{
    message.error(err || "获取全部菜单失败")
  })
}


const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({page:1})
  // 属性数据无法用分页组件触发，需要在初始化的时候，主动获取
  gettreeDatefunc()
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>

<style scoped>

</style>
